<template>
  <section id="bodyBoxData" :class="{'English': languageData.id == 'English'}">
    <section class="header" style="position: fixed;z-index: 1000;width: 100%">
       <HeaderPublc></HeaderPublc>
    </section>
    <section class="cent" >
      <div class="saech" style="position: relative;overflow: hidden">
        <div class="fromBox">
          <div class="list">
            <div class="time name">
              <!-- 服务客户名-->
              <label>{{languageData.public.Customer}}:</label>
              <input type="text" v-model="fromdat.companyName" class='' :placeholder="languageData.public.Customer">
            </div>
            <div class="time name">
              <!-- 品名-->
              <label>{{languageData.public.TradeName}}:</label>
              <input type="text" v-model="fromdat.goodsName" class='' :placeholder="languageData.public.TradeName" >
            </div>
            <div class="time selectedBxo ">
              <!-- 运输状态-->
              <label>{{languageData.public.status}}:</label>
              <el-select v-model="fromdat.transStatus" clearable :placeholder="languageData.public.status" popper-class="selckbox">
                <el-option
                  v-for="item in transStatus"
                  :key="item.value"
                  :label="languageData.id=='Chinese'?item.label:item.label2"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="cleae"></div>
          </div>
          <div class="list">
            <div class="time selectedBxo ">
              <el-popover ref="popover3" v-model="visible" placement="bottom" width="376" trigger="focus" >
                <div class="listCity">
                  <p style="line-height: 25px" v-for="list in  cityData" v-on:click="clickgetcity(list,1)" ><span>{{list.stationCN}}({{list.code}}) </span><span> {{list.stationEN}}</span> </p>
                </div>
              </el-popover>
              <!-- 始发城市-->
              <label>{{languageData.public.DepartureCity}}:</label>
              <input type="text" v-model="fromdat.orignCity" class="inputT"  @focus="cityData=[]; fromdat.orignCity = '';fromdat.startcode = ''"  v-popover:popover3 @keyup="keyup(1)" :placeholder="languageData.public.DepartureCity"/>
              <div class="cleae">
              </div>
            </div>
            <div class="time selectedBxo ">
                <!-- 始发国家-->
              <label> {{languageData.public.DepartureCountry}}:</label>
              <el-select v-model="fromdat.originCountry" clearable :placeholder="languageData.public.DepartureCountry" popper-class="selckbox" @change="change(1)">
                <el-option
                  v-for="item in city"
                  :key="item.id"
                  :label="languageData.id=='Chinese'?item.countryCN:item.countryEN"
                  :value="item.id">
                </el-option>
              </el-select>
              <div class="cleae">

              </div>
            </div>
            <div class="time selectedBxo ">
              <!-- 目的地城市-->
              <label>{{languageData.public.DestinationCity}}:</label>
              <el-popover ref="popover4" v-model="visible2" placement="bottom" width="376" trigger="focus" >
                <div class="listCity">
                  <p style="line-height: 25px" v-for="list in  cityData" v-on:click="clickgetcity(list,2)" ><span>{{list.stationCN}}({{list.code}})</span><span> {{list.stationEN}}</span></p>
                </div>
              </el-popover>
              <input type="text" v-model="fromdat.destCity" class="inputT" v-popover:popover4 @keyup="keyup(2)" @focus="cityData=[];fromdat.destCity = '';fromdat.destCode = ''" :placeholder="languageData.public.DestinationCity"/>
              <div class="cleae">

              </div>
            </div>
            <div class="time selectedBxo ">
              <!-- 目的地国家-->
              <label>{{languageData.public.DestitnationCountry}}:</label>
              <el-select v-model="fromdat.destCountry" clearable :placeholder="languageData.public.DestinationCity" popper-class="selckbox"  @change="change(2)">
                <el-option
                  v-for="item in city"
                  :key="item.id"
                  :label="languageData.id=='Chinese'?item.countryCN:item.countryEN"
                  :value="item.id">
                </el-option>
              </el-select>
              <div class="cleae">

              </div>
            </div>
            <div class="cleae"></div>
          </div>
          <div class="list">
            <div class="time selectedBxo ">
              <!-- 运输方式-->
              <label>{{languageData.public.modeOfTransport}}:</label>
              <el-select v-model="fromdat.transMode" clearable :placeholder="languageData.public.modeOfTransport" popper-class="selckbox">
                <el-option
                  v-for="item in transMode"
                  :key="item.value"
                  :label="languageData.id=='Chinese'?item.label:item.label2"
                  :value="item.value">
                </el-option>
              </el-select>
              <div class="cleae">
              </div>
            </div>
            <div class="time selectedBxo ">
              <!-- 过境口岸-->
              <label>{{languageData.public.TransitPort}}:</label>
              <input type="text" v-model="fromdat.transitPort" class="inputT"  :placeholder="languageData.public.TransitPort"/>
              <div class="cleae">

              </div>
            </div>
            <div class="time selectedBxo ">
              <!-- 集装箱归属-->
              <label>{{languageData.public.ContainerOwner}}:</label>
              <el-select v-model="fromdat.cartonOwner" clearable :placeholder="languageData.public.ContainerOwner" popper-class="selckbox">
                <el-option
                  v-for="item in cartonOwner"
                  :key="item.value"
                  :label="languageData.id=='Chinese'?item.label:item.label2"
                  :value="item.value">
                </el-option>
              </el-select>
              <div class="cleae">
              </div>
            </div>
            <div class="time selectedBxo ">
              <!-- 箱型-->
              <label>{{languageData.public.ContainerType}}:</label>
              <el-select v-model="fromdat.cartonType" clearable :placeholder="languageData.public.ContainerType" popper-class="selckbox">
                <el-option
                  v-for="item in cartonType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <div class="cleae">
              </div>
            </div>
            <div class="cleae"></div>
          </div>
          <div class="list">
            <!-- 车型-->
            <div class="time selectedBxo " >
              <label>{{languageData.public.VeichelType}}:</label>
              <el-select v-model="fromdat.vehicleType"  clearable style="margin-left: 28px"  :placeholder="languageData.public.VeichelType" popper-class="selckbox">
                <el-option
                  v-for="item in vehicleType"
                  :key="item.value"
                  :label="languageData.id=='Chinese'?item.label:item.label2"
                  :value="item.value">
                </el-option>
              </el-select>
              <div class="cleae">
              </div>
            </div>
            <div class="time selectedBxo ">
              <!-- 起止时间-->
              <label>{{languageData.id=='Chinese'?'起止时间':'time'}}:</label>
              <p  class='selected1'>
                <el-date-picker style="width:130px;height:25px;position: absolute;left: 0px;top: -5px;opacity: 0;z-index: 100"
                                v-model="fromdat.startDay"
                                clearable
                                type="date"
                                :picker-options="pickerBeginDateBefore"
                                 value-format="yyyy-MM-dd"
                                placeholder="选择日期">
              </el-date-picker>
                {{fromdat.startDay}}<span class="icon el-icon-arrow-down"></span></p>
              <div class="to" > - </div>
              <p  class='selected1'>
                <el-date-picker style="width:130px;height:25px;position: absolute;left: 0px;top: -5px;opacity: 0;z-index: 100"
                                v-model="fromdat.finishDay"
                                clearable
                                type="date"
                                :picker-options="pickerBeginDateAfter"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                </el-date-picker>
               {{fromdat.finishDay}} <span class="icon el-icon-arrow-down"></span></p>

              <el-button type="primary"  class="submit" v-on:click="serch"> {{languageData.admin.search}} </el-button>
              <div class="cleae" :comShowAnalysisDatalist="comShowAnalysisDatalist">

              </div>
            </div>
            <div class="cleae"></div>
          </div>
        </div>
        <div class="imgBox">
          <img src="../../../static/img/dataBanner.png" />
        </div>
      </div>
      <div id="plan">
        <!-- 搜索-->
        <div class="box">
          <div class="card">
            <!-- 服务客户数量-->
            <p class="title">{{languageData.public.NoofCustmoer}}</p>
            <p class="cop">
              <span> {{dataChart.companyNum}}</span>
              <span> </span>
            </p>
          </div>
          <div class="card">
            <!-- 使用次数-->
            <p class="title">{{languageData.public.NoofCustmoer}}</p>
            <p class="cop">
              <span v-show="dataChart.orderNum['1']" >{{languageData.id=='Chinese'?'已完成':'In transit'}}  {{dataChart.orderNum['1']}}</span>
              <span v-show="dataChart.orderNum['0']">{{languageData.id=='Chinese'?'进行中':'Finished'}}  {{dataChart.orderNum['0']}}</span>
            </p>
            <p class="cop" v-show="dataChart.orderNum.length<=0">
              <span > - - - -</span>
            </p>
          </div>
          <div class="card">
            <!-- 始发城市-->
            <p class="title">{{languageData.public.DepartureCity}}</p>
            <p class="cop">
              <span> {{dataChart.orignCityNum}} </span>
            </p>
          </div>
          <div class="card">
            <!-- 始发国家-->
            <p class="title">{{languageData.public.DepartureCountry}}</p>
            <p class="cop">
              <span> {{dataChart.originCountryNum}}</span>
            </p>
          </div>
          <div class="card">
            <!-- 目的城市-->
            <p class="title">{{languageData.public.DestinationCity}}</p>
            <p class="cop">
              <span>{{dataChart.destCityNum}}</span>
            </p>
          </div>
          <div class="card">
            <!-- 目的国家-->
            <p class="title">{{languageData.public.DestitnationCountry}}</p>
            <p class="cop">
              <span>{{dataChart.destCountryNum}} </span>
            </p>
          </div>
          <div class="card">
            <!-- 运输方式-->
            <p class="title">{{languageData.public.modeOfTransport}}</p>
            <p class="cop">
              <span> {{dataChart.transModeNum }} </span>
            </p>
          </div>
          <div class="card">
            <!-- 过境口岸-->
            <p class="title">{{languageData.public.TransitPort}}</p>
            <p class="cop">
              <span> {{dataChart.transitPortNum }} </span>
            </p>
          </div>
          <div class="card">
            <!-- 货物量-->
            <p class="title">{{languageData.public.ContainerUsage}}</p>
            <p class="cop">
              <span> {{dataChart.goodsStorage}}TEU</span>
            </p>
          </div>
          <div class="card">
            <!-- 品名种类-->
            <p class="title">{{languageData.public.NoofTradeName}}</p>
            <p class="cop">
              <span> {{dataChart.goodsNameNum}} </span>
            </p>
          </div>
          <div class="card">
            <!-- 车型-->
            <p class="title">{{languageData.public.VeichelType}}</p>
            <p class="cop">
              <span v-show="dataChart.vehicleTypes['1']">{{languageData.id=='Chinese'?'篷车':'Van'}} {{dataChart.vehicleTypes['1']}}</span>
              <span v-show="dataChart.vehicleTypes['2']">{{languageData.id=='Chinese'?'敞车':'Gondola car'}} {{dataChart.vehicleTypes['2']}}</span>
            </p>
            <p class="cop">
              <span v-show="dataChart.vehicleTypes['3']">{{languageData.id=='Chinese'?'罐车':'Tank Car'}} {{dataChart.vehicleTypes['3']}}</span>
              <span v-show="dataChart.vehicleTypes['4']">{{languageData.id=='Chinese'?'平板车':'FLAT CAR'}} {{dataChart.vehicleTypes['4']}}</span>
            </p>
            <p class="cop" v-show="!dataChart.vehicleTypes">
             <span > - - - -</span>
            </p>
          </div>
          <div class="card">
            <!-- 集装箱归属-->
            <p class="title">{{languageData.public.ContainerOwner}}</p>
            <p class="cop">
              <span v-show="dataChart.cartonOwner['0']">{{languageData.id=='Chinese'?'铁路箱':'Railway Container'}}  {{dataChart.cartonOwner['0']}} </span>
              <span v-show="dataChart.cartonOwner['1']">{{languageData.id=='Chinese'?'租箱':'Rent'}}   {{dataChart.cartonOwner['1']}} </span>
              <span v-show="dataChart.cartonOwner['2']">{{languageData.id=='Chinese'?'买箱':'Buy'}}  {{dataChart.cartonOwner['2']}} </span>
            </p>
            <p class="cop" v-show="!dataChart.cartonOwner">
              <span > - - - -</span>
            </p>
          </div>
          <div class="cleae"></div>
        </div>
      </div>
      <div id="map" class="map" :cityList="cityList">
      </div>
    </section>
    <section class="footer" >
    </section>
  </section>
</template>
<style scoped>
  .inputT{width: 108px}
  .imgBox{width: 50%;position: absolute;bottom: 0px;left: 50%;max-height: 220px;height: 220px;z-index: 1;overflow: hidden}
  .imgBox img{max-width: 100%;position:absolute;right:0px;bottom: 0px}
  .H_ib_body {background: #e1e1e1 !important}
  input{background:none;border: 0px none;border: 1px solid #44516a;border-radius: 2px;height: 25px;line-height: 25px;padding-left: 10px;padding-right: 10px; color:#fff;font-size: 14px }
  label{color: #999;font-size: 14px;line-height: 25px;margin-right: 5px}
  .time{margin-right: 20px;float: left}
  .submit{width: 100px;height: 27px;line-height: 0px;margin-left:100px}
  .time p{ line-height: 25px;color: #fff;font-size: 14px}
  .fromBox{width: 65%;max-width: 915px;margin-left:20px;margin-top: 10px;text-align: left;min-width: 996px;position: relative;z-index: 2;}
  /*background: rgba(35,46,68,0.8)*/
  .name input {width: 232px}
  .icon{position: absolute;top: 0px;right: 10px;line-height: 25px;color:#44516a }
  .to{float: left;color:#44516a;margin:0px 5px ;line-height: 25px;font-size: 18px}
  .selectedBxo label{float: left; }
  .list{margin-bottom: 20px}
  .selected1{width: 100px;height: 25px;border: 1px solid #44516a;float: left;cursor: pointer;position: relative;padding-left:10px;padding-right: 20px ;border-radius: 2px}
  .selected1:hover{ border: 1px solid #4970b4}
  .selected1:hover .icon{ color:  #4970b4}
  .cent{ border-top:1px solid #dedede}
  #bodyBoxData{background-color: #232e44;min-height: 800px}
  .map{ background: grey; margin-right: 10px;margin-left:345px;min-height: 700px}
  .cent .map2{margin-left: 0px; background: grey; margin-right: 10px;margin-top: 50px}
  #plan{float: left; width:329px;height:auto;text-align: left;padding: 10px;margin: auto}
  .box{width:300px;margin: auto;padding-top: 15% }
  .card{width: 50%;float: left;min-height: 80px}
  .card  .title{line-height: 30px;color: #999;font-size: 14px}
  .card  .cop{line-height: 30px;color: #0385df;font-weight: bold}
  .card  .cop span{display: block}
  .saech{ width: 100%;min-height:200px;position: relative;padding: 10px 0px 10px;border-bottom: 1px solid #192233;margin-top: 50px;}
  #list p{font-size: 14px;text-align: left;line-height: 30px;word-break:break-all;}
  .listCent p{line-height: 20px;}
  .next span{ font-size: 12px;cursor: pointer;color: #999}
  .first p{ line-height: 30px;font-weight: bold;cursor: pointer;width:185px;word-break:break-all;}
  .last p{ line-height: 30px;font-weight: bold;cursor: pointer; width:185px;word-break:break-all;}
  .last p:hover{ color: #409eff}
  .first p:hover{ color: #409eff}
  #list li p{font-size: 12px;line-height: 20px;cursor: pointer;width: 175px; word-break:break-all;}
  #list li p:hover{ color: #409eff}
  ul{ padding: 5px;padding-bottom: 0px;height:0px;}
  iframe{left: 500px;}
  .value1{background: none}
  .listCity span{margin: 0px 10px}
  .listCity p{padding: 10px 0px;cursor: pointer}
  .listCity p:hover{background: #e1e1e1}
  @media only screen and (min-width: 600px){
    .imgBox{left: 64%;}
    /*.imgBox img{width:400px}*/
  }
  @media only screen and (min-width: 1200px){
    .imgBox{left: 64%;}
    /*.imgBox img{width:400px}*/
  }
  @media only screen and (min-width: 1366px){
    .imgBox{left: 60%;}
  }
  @media only screen and (min-width: 1600px){
    .imgBox{left: 50%;}
  }
  @media only screen and (min-width: 1920px){
    .imgBox{left: 50%;}
  }
  .English .fromBox{width: 80%;min-width: 1100px;}

</style>
<script>
  import HeaderPublc from '../public/herder.vue'
  import saechFirst from '../index.vue'
  import Public from '../../vuex/public.js'
  import Clipboard from 'clipboard'
  import {mapState, mapActions} from 'vuex'
  import makImg from '../../../static/img/icon/icon_car_nor.png'
  import wx from 'weixin-js-sdk'
  export default {
    name: 'my-map2',
    created () {
      // 查看本页面路由
      this.check = this.$route.name

      this.getCityList({})
      this.$store.commit('comShowAnalysisData', null)
     // 查看有无登陆
      var userData = Public.publicLo.sessionStorageGet('user')
      if (userData) {
        // 转换对象
        userData = JSON.parse(userData)
        // 渲染
        this.user = {
          nickName: userData.nickName,
          headImg: userData.headImg,
          id: userData.userId
        }
      }
    },
    data () {
      return {
        visible2:false,
        visible:false,
        cityData:[],
        fromdat:{
          companyName:'',// 公司名称
          goodsName:'',// 品名
          transStatus:null,// 运输状态
          orignCity:'', // 起始城市
          startcode:'',//起始城市 code
          originCountry:'', // 起始国家
          destCity:'', // 目标城市
          destCountry:'',// 目标国家
          transMode:null,// 运输方式
          transitPort:'',// 过境口岸
          cartonOwner:null,// 集装箱归属
          cartonType:'',// 箱型
          vehicleType:'',// 车型
          startDay:'',//开始时间 20180323
          finishDay:'',// 结束时间  20180323
          countryCN1:''
        },
        pickerBeginDateBefore:{
          disabledDate: (time) => {
            let beginDateVal =  new Date().getTime()
            // Public.publicLo.dataChange(this.fromdat.startDay)

            if (beginDateVal) {
              return time.getTime() > beginDateVal;
            }
          }
        },
        pickerBeginDateAfter:{
          disabledDate: (time) => {
            let beginDateVal = new Date().getTime()

            if (beginDateVal) {
              return time.getTime()>  beginDateVal;
            }
          }
        },

        dataChart:{
          companyNum:0,
          orderNum:{"0":0,"1":0,"2":0},
          goodsStorage:'---',
          goodsNamesNum:'---',
          vehicleTypes:{"1":0,'2':0,"3":0,"4":0},
          cartonOwner:{"0":0,'1':0,"2":0},
          orignCity:'---',
          originCountry:'---',
          destCity:'---', // 目标城市
          endcod:'',
          destCountry:'---',// 目标国家
          transMode:'---', // 运输方式
          transitPort:'---', // 过境口岸
          goodsName:'---', // 品名
          tracks:[],// 轨迹
        },
        makImg: makImg,
        map: {},
        type:1,
        mapDate: null,
        platform: null,
        behavior: null,
        defaultLayers: null,
        ui: null,

        bubble: null,
        routeInstructionsContainer: null,
        //
        user: {
          nickName: null,
          headImg: null,
          id: null
        },
        mapType:'google',
        polylineList:[],
        infowindow:null,
        transStatus:[{
          value: 0,
          label: '运输中',
          label2: 'In transit',
        }, {
          value: 1,
          label: '运输完成',
          label2: 'Finished',
        }],
        transMode:[{
          value: 0,
          label: '火车',
          label2: 'Train'
        }, {
          value: 1,
          label: '汽车',
          label2: 'Motor'
        }],
        cartonOwner: [{
          value: 2,
          label: '租箱',
          label2: 'Buy',
        },{
          value: 3,
          label: '买箱',
          label2: 'Rent',
        },{
          value: 1,
          label: '铁路箱',
          label2: 'Railway Container',
        }],
        vehicleType: [{
          value: 1,
          label: '篷车',
          label2: 'Van'
        }, {
          value: 2,
          label: '敞车',
          label2: 'Gondola car'
        }, {
          value: 3,
          label: '罐车',
          label2: 'Tank Car'
        }, {
          value: 4,
          label: '平板车',
          label2: 'FLAT CAR'
        }],
        cartonType: [{
          value: '20GP',
          label: '20GP'
        }, {
          value: '40GP',
          label: '40GP'
        }, {
          value: '40HQ',
          label: '40HQ'
        }],
        city:[{
          id: 0,
          countryCN: '中国',
          countryEN:'中国'
        }, {
          id: 1,
          countryCN: '中国'
        },{
          id: 2,
          countryCN: '中国'
        },{
          id: 3,
          countryCN: '中国'
        },{
          id: 4,
          countryCN: '中国'
        }],

        lastIndex:[],
        neighborhoods:[],
        iterator:[],
        poly :[],
        markers :[],
        index :[],
       icon1: '../../../static/img/icon/star1.png',
//轨迹点图标
       icon2:'../../../static/img/icon/end1.png',
      }
    },
    methods: {
      ...mapActions({
        mapListpost: 'mapListFn',
        checkID: 'checkId',
        checkNumber: 'checkNumber',
        tokenWx:'tokenWx',
        getCityList:'getCityList',
        showAnalysisData:'showAnalysisData'
      }),
      // 渲染地图
      mapFn (map, parm) {
        if(this.mapType=='here'){
          if (parm) {
            if(parm.lat){
              map.setCenter({lat: parm.lat, lng: parm.lng})
            }
          } else {
            map.setCenter({lat: 116.404, lng: 39.915})
          }
          map.setZoom(13)
          map.setBaseLayer(this.defaultLayers.normal.traffic)
        }
        if(this.mapType=='baidu'){
          var point
          if (parm) {
            point = new BMap.Point(parm.lng, parm.lat);
          } else {
            point = new BMap.Point(116.404, 39.915);
          }
          // 创建点坐标
          map.centerAndZoom(point, 15);
          map.enableScrollWheelZoom(true);
        }
        if(this.mapType=='google'){
          var point
          if (parm) {
            if(parm.lat){
              point =  new google.maps.LatLng(parm.lat, parm.lng);
            }
          } else {
            point = new google.maps.LatLng(39.915,116.404);
          }
          var mapProp = {
            center:point,
            zoom:4,
            mapTypeId:google.maps.MapTypeId.ROADMAP
          };
          this.map = new google.maps.Map(document.getElementById("map"), mapProp);
        }
      },

      mapService () {
        // 选取地图容器
        var mapContainer = document.getElementById('map')
//        this.routeInstructionsContainer = document.getElementById('panel')
        // 地图配置：初始化与地图平台数据
        this.platform = new H.service.Platform({
          app_id: 'xDU8ZS8OLFy8aG8qzDKS',
          app_code: '7gaEA7LqoE9oFNnbyVFKTA'
        })
        //
        this.defaultLayers = this.platform.createDefaultLayers()
        //  初始化一张地图,设置中心点
        this.map = new H.Map(mapContainer,this.defaultLayers.normal.map)
        // 默认，实现泛/缩放。
        this.behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map))
        // 创建默认UI组件
        this.ui = H.ui.UI.createDefault( this.map, this.defaultLayers)
        // 创建地图
        this.mapFn(this.map)
      },
      /**
       * 谷歌地图
       */
      //加载谷歌地图静态文件
      googleMap(){
        // var script = document.createElement("script");
        // script.src = "http://maps.google.cn/maps/api/js?key=AIzaSyBXa5IGr11xML0OumozehXsvEJ9Y7tTV4Q&language=zh-CN&sensor=TRUE_OR_FALSE";
        // document.body.appendChild(script);
        var that=this;
          that.googleMapService()
      },
      //创建地图实例
      googleMapService () {
        this.mapFn()
        // var point = new BMap.Point(116.404, 39.915);
      },
      /** 绘画路径
       * Creates a H.map.Polyline from the shape of the route and adds it to the map.
       * @param {Object} route A route as received from the H.service.RoutingService
       */
      addRouteShapeToMap (route) {
        //herrd地图
          var myTrip=[]
          for(let i in route){
            // var x = new google.maps.Projection(route[i].lat,route[i].lng)
            // consoel.log(x,'x')
            var p = new google.maps.LatLng(route[i].latitude,route[i].longitude);
            myTrip.push(p)
          }
          var flightPath = new google.maps.Polyline({
            path:myTrip,
            strokeColor:"#0000FF",
            strokeOpacity:0.8,
            strokeWeight:6
          });
          flightPath.setMap(this.map);
        //this.addManueversToMap(route)
      },
      /** 创建地图点maneuver
       * Creates a series of H.map.Marker points from the route and adds them to the map.
       * @param {Object} route  A route as received from the H.service.RoutingService
       */
      addManueversToMap (route) {
          for( let i in route){
            var myIcon  = {
              url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
              origin: new google.maps.Point(0, 0),
              // The anchor for this image is the base of the flagpole at (0, 32).
              anchor: new google.maps.Point(0, 20)
            };
            var myCenter=  new google.maps.LatLng(route[i].latitude,route[i].longitude);
            if(i==0){
              myIcon.url = "../../../static/img/icon/stra.png"
              myIcon.anchor= new google.maps.Point(13, 13)
              var marker = new google.maps.Marker({
                position:myCenter,
                icon:myIcon
              });
              marker.setMap(this.map);
            }else {
              if(i == route.length - 1 && i != 0){
                myIcon.url = "../../../static/img/icon/end.png"
                myIcon.anchor= new google.maps.Point(13, 25)
                // this.map.setCenter(myCenter)
                var marker = new google.maps.Marker({
                  position:myCenter,
                  icon:myIcon
                });
                marker.setMap(this.map);
              }else {
                // myIcon.url = "../../../static/img/icon/deft.png"
                // myIcon.anchor= new google.maps.Point(8, 8)
              }
            }

          }
      },
      // 标注弹框

   // 创建地图
      initialize(parm) {
        var point
        if (parm) {
          if(parm.lat){
            point =  new google.maps.LatLng(parm.lat, parm.lng);
          }
        } else {
          point = new google.maps.LatLng(42.56379,69.988992);
        }
        var mapProp = {
          center:point,
          zoom:3,
          mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        this.map = new google.maps.Map(document.getElementById("map"), mapProp);
      },
      // 递归
      jiazai(arry,id,length){
        this.iterator[id] = 0
        this.neighborhoods[id] = [];
        this.markers[id] = []
        this.index[id] = 0

        var polyOptions = {
          strokeColor : '#057ef1',
          strokeOpacity : 1.0,
          strokeWeight : 3
        };
        this.poly[id] = new google.maps.Polyline(polyOptions);
        this.poly[id].setMap(this.map);
        for (let i in arry){
          this.neighborhoods[id].push(new google.maps.LatLng(arry[i].latitude, arry[i].longitude))
        }
        this.drop(id,length);
      },
      ping(arry){
        var length = arry.length-1
         this.index = 0
        var arrydata = []
        for(let i=0;i<length; i++){
          var s = this.getDistance(arry[i].lgt,arry[i].lat,arry[i+1].lgt,arry[i+1].lat)
        if (s>100){
            var da = this.fenjie(arry[i].lgt,arry[i].lat,arry[i+1].lgt,arry[i+1].lat)
          for(var k in da){
            arrydata.push(da[k])
          }
        }else {
            arry.index = this.index
          arrydata.push(arry[i])
          this.index++
        }
        }
      },
      rad(d) {
        return d * Math.PI / 180.0;
      },
      // 计算距离
      getDistance(lng1, lat1, lng2, lat2) {
        var radLat1 = this.rad(lat1);
        var radLat2 = this.rad(lat2);
        var a = radLat1 - radLat2;
        var b = this.rad(lng1) - this.rad(lng2);
        var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2)
          + Math.cos(radLat1) * Math.cos(radLat2)
          * Math.pow(Math.sin(b / 2), 2)));
        s = s * 6378.137;
        s = Math.round(s * 10000) / 10000;
        return s;
      },
      // qiege距离
      fenjie(lng1, lat1, lng2, lat2) {
        var radLat1 = (lng1 - lng2)/8;
        var radLat2 = (lat1 - lat2)/8;
        var s =[]
        for(let i=1;i<8;i++){
          s.push({lat:(lat1+radLat2*i),lgt:(lng1+radLat1*i),id:this.index})
          this.index++
        }
        return s;
      },
      // 动画
      drop(id,length) {
        if (id >= length){ return }
        for (var i = 0; i < this.neighborhoods[id].length; i++) {
          var that = this
          setTimeout(function() {
            that.addMarker(id);
          }, i * 25);
        }
      },
      addMarker(id) {
        var path
        if(this.poly[id]){
          path = this.poly[id].getPath();
        }
        // Because path is an MVCArray, we can simply append a new coordinate
        // and it will automatically appear.

        if(this.index[id] == 0){

          var myIcon  = {
            url: this.icon1,
            origin: new google.maps.Point(0, 0),
            // The anchor for this image is the base of the flagpole at (0, 32).
            anchor: new google.maps.Point(13, 13)
          };
          this.markers[id].push(new google.maps.Marker({
              position : this.neighborhoods[id][this.iterator[id]],
              title : '#' + path.getLength(),
              map : this.map,
              icon : myIcon
            }));

        }
        if( this.neighborhoods[id]){
          if(this.index[id] ==  this.neighborhoods[id].length-1){
            var myIcon  = {
              url: this.icon2,
              origin: new google.maps.Point(0, 0),
              // The anchor for this image is the base of the flagpole at (0, 32).
              anchor:new google.maps.Point(13, 25)
            };
            this.markers[id].push(new google.maps.Marker({
              position : this.neighborhoods[id][this.iterator[id]],
              title : '#' + path.getLength(),
              map : this.map,
              icon : myIcon
            }));
          }
          path.push(this.neighborhoods[id][this.iterator[id]]);
        }

        // if (this.iterator > 0) {
        //   this.markers[this.iterator - 1].setIcon(this.icon2);
        // }
       // this.neighborhoods[this.iterator]
        // Add a new marker at the new plotted point on the polyline.
        // this.markers.push(new google.maps.Marker({
        //   position : this.neighborhoods[this.iterator],
        //   title : '#' + path.getLength(),
        //   map : this.map,
        //   icon : this.icon1
        // }));
        // this.map.panTo(this.neighborhoods[this.iterator]);
        // this.map.setCenter
        this.index[id]++
        this.iterator[id]++;
        // if(this.iterator > 0){
        //   // this.markers[id].setMap(null)
        //   var that = this
        //   //this.markers[id].setMap(null)
        // }
        //
        // this.markers[id] = new google.maps.Marker({
        //   position :  this.neighborhoods[this.iterator],
        //   map :  this.map,
        //   icon :  this.icon2
        // })
        // this.iterator++;
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      },
      // 导出execl表格
      sev(){
        if(this.mapType=='here'){
         // this.mapService()
        }
        if(this.mapType=='baidu'){
          //this.baiduMap()
        }
        if(this.mapType=='google'){
          //this.googleMap()
        }
      },
      cityListDataFn(res){
        res = res.body.data
        this.city = res
      },
      // keyup
      keyup(a){
        var p =[]

          if(a==1){

          this.cityData = Public.publicLo.getCity(this.fromdat.orignCity,this.stationData)
          }
          if(a==2){
           this.cityData = Public.publicLo.getCity(this.fromdat.destCity,this.stationData1)
          }
        },
      change(a){
        var p =[]
       if(a==1){
         var str = ''
         for (let i in this.city){
           if(this.city[i].id == this.fromdat.originCountry ){
             str = this.city[i].countryCN
           }
         }
          if(this.fromdat.countryCN != str){
            this.fromdat.orignCity=''
            this.fromdat.startcode=''
          }
         this.stationData = Public.publicLo.getCity2(str)
       }

       if(a==2){
         var str = ''
         this.fromdat.destCity = ''
         this.fromdat.endcod = ''
         for (let i in this.city){
           if(this.city[i].id == this.fromdat.destCountry){
             str = this.city[i].countryCN
           }
         }
         this.stationData1 = Public.publicLo.getCity2(str)
       }
      },
      clickgetcity(text,a){
       var str = ''
        for (let i in this.city){
          if(this.city[i].countryCN == text.countryCN){
            str = this.city[i].id
          }
        }

        if (a==1){
          this.fromdat.orignCity = text.cityCN+  '-- '+text.cityEn
          this.fromdat.startcode = parseInt(text.id);
          this.fromdat.countryCN = text.countryCN
          this.fromdat.originCountry = str
        }
        if (a==2){
          this.fromdat.destCity = text.cityCN+  '-- '+text.cityEn
          this.fromdat.endcode = parseInt(text.id);
          this.fromdat.countryCN1 = text.countryCN
          this.fromdat.destCountry = str
        }

      },
      // 数据解析
      ShowAnalysisDataFN(res){
        this.initialize()
        this.neighborhoods=[]
        this.iterator = []
        this.poly = []
        this.markers = []
        this.index = []
         res = res.body.data
        var transOrderStatisticsList = res.transOrderStatisticsList

        var data = {
          companyNum:res.companyNum,//公司个数
          orderNum:JSON.stringify(res.orderNum) =='{}'? '':res.orderNum,//运输方式
          goodsStorage:res.goodsStorage,
          transOrderStatisticsList:transOrderStatisticsList,
          goodsNamesNum:res.goodsNamesNum,
          vehicleTypes:JSON.stringify(res.vehicleTypesNum) =='{}'? '':res.vehicleTypesNum,
          cartonOwner:JSON.stringify(res.cartonOwnersNum)=='{}'? '':parseInt(res.cartonOwnersNum),
          orignCityNum:res.orignCityNum,
          originCountryNum:res.originCountryNum,
          destCityNum:res.destCityNum,
          destCountryNum:res.destCountryNum,
          transModeNum:res.transModeNum,
          transitPortNum:res.transitPortNum,
          goodsNameNum:res.goodsNameNum
      }
        // {
        //   goodsNamesNum:res.transOrderStatisticsList.goodsNamesNum,
        //     vehicleTypes:res.transOrderStatisticsList.vehicleTypes,
        //   cartonOwner:res.cartonOwner,
        //   orignCity:res.orignCity,
        //   originCountry:res.originCountry,
        //   destCity:res.destCity, // 目标城市
        //   destCountry:res.destCountry,// 目标国家
        //   transMode:res.transMode, // 运输方式
        //   transitPort:res.transitPort, // 过境口岸
        //   goodsName:res.goodsName, // 品名
        //   tracks:res.tracks,// 轨迹
        // }
        this.dataChart = data;

         for(let i in transOrderStatisticsList){
           if(transOrderStatisticsList[i].tracks.length>0){

             //this.addRouteShapeToMap(transOrderStatisticsList[i].tracks)
            this.jiazai(transOrderStatisticsList[i].tracks,i,transOrderStatisticsList[i].tracks.length)
           }
         }
      },
      serch(){

        this.dataChart={
          companyNum:0,
            orderNum:{"0":0,"1":0,"2":0},
           goodsStorage:'---',
            goodsNamesNum:'---',
            vehicleTypes:{"1":0,'2':0,"3":0,"4":0},
           cartonOwner:{"0":0,'1':0,"2":0},
             orignCity:'---',
            originCountry:'---',
            destCity:'---', // 目标城市
            endcod:'',
            destCountry:'---',// 目标国家
            transMode:'---', // 运输方式
            transitPort:'---', // 过境口岸
            goodsName:'---', // 品名
          transOrderStatisticsList:[],// 轨迹
        }
        var startDay = '',finishDay=''
        if(this.fromdat.startDay){
          startDay = this.fromdat.startDay.split('-').join('')
        }
        if(this.fromdat.finishDay){
          finishDay = this.fromdat.finishDay.split('-').join('')
        }

        var parm = {
          // companyName:this.fromdat.companyName,// 公司名称
          // goodsName:this.fromdat.goodsName,// 品名
          // transStatus:this.fromdat.transStatus,// 运输状态
          // orignCity:this.fromdat.startcode, // 起始城市
          // originCountry:this.fromdat.originCountry, // 起始国家
          // destCity:this.fromdat.endcode, // 目标城市
          // destCountry:this.fromdat.destCountry,// 目标国家
          // transMode:this.fromdat.transMode,// 运输方式
          // transitPort:this.fromdat.transitPort,// 过境口岸
          // cartonOwner:this.fromdat.cartonOwner,// 集装箱归属
          // cartonType:this.fromdat.cartonType,// 箱型
          // vehicleType:this.fromdat.vehicleType,// 车型
          // startDay:startDay,//开始时间 20180323
          // finishDay:finishDay,// 结束时间  20180323
        }
        if(this.fromdat.companyName){ parm.companyName = this.fromdat.companyName}
        if(this.fromdat.goodsName){ parm.goodsName = this.fromdat.goodsName}
        if(this.fromdat.transStatus){ parm.transStatus = this.fromdat.transStatus}
        if(this.fromdat.transStatus == 0){ parm.transStatus = this.fromdat.transStatus}
        if(this.fromdat.orignCity){ parm.orignCity = this.fromdat.startcode}
        if(this.fromdat.originCountry){ parm.originCountry = this.fromdat.originCountry}
        if(this.fromdat.destCity){ parm.destCity = this.fromdat.endcode}
        if(this.fromdat.destCountry){ parm.destCountry = this.fromdat.destCountry}
        if(this.fromdat.transMode){ parm.transMode = this.fromdat.transMode}
        if(this.fromdat.transMode == 0){ parm.transMode = this.fromdat.transMode}
        if(this.fromdat.transitPort){ parm.transitPort = this.fromdat.transitPort}

        if(this.fromdat.cartonOwner == 0){ parm.cartonOwner = 0}
        if(this.fromdat.cartonOwner){ parm.cartonOwner = this.fromdat.cartonOwner}
        if(this.fromdat.cartonType){ parm.cartonType = this.fromdat.cartonType}
        if(this.fromdat.vehicleType){ parm.vehicleType = this.fromdat.vehicleType}
        if(this.fromdat.startDay){ parm.startDay = startDay}
        if(this.fromdat.finishDay){ parm.finishDay = finishDay}

        this.showAnalysisData(parm)
      }
      },
    computed: {
      // 语言切换
      languageData: function () {
        var parm = this.language
        if (parm) {
          this.languageCheak = parm.check
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
          }
        }
        return parm
      },
      // 地图列表数据
      // cityList
      cityList: function (){
       var parm = this.cityListData
        if(parm){
         this.cityListDataFn(parm)
        }
               return 1
      },
      comShowAnalysisDatalist: function (){
        var parm = this.ShowAnalysisDatalist
        if(parm){
          this.ShowAnalysisDataFN(parm)
        }
        return 1
      },
      ...mapState([
        'shechIput',
        'language',
        'mapList',
        'tokenWxData',
        'transportList',
        'cityListData',
        'ShowAnalysisDatalist'
      ])
    },
    mounted () {

      var body = document.documentElement.clientHeight

      var dom  = document.getElementById('map')


      dom.style.height = body + 'px'
      var that =  this
    setTimeout(function () {
      that.serch()
    },1000)
    },
    components: {
      HeaderPublc: HeaderPublc,
    }
  }
</script>

